<template>
  <fieldset>
    <legend>常用api</legend>
    <input type="text" name="" id="" ref="ipt" />
    <button @click="btnClick">获取焦点</button>
    <h1 id="name">{{ name }}</h1>
    <button @click="change">改变name属性</button>
    <Child ref="child"></Child>
  </fieldset>
</template>

<script>
import Child from "@/components/Child";
export default {
  data() {
    return {
      name: "万里",
    };
  },

  mounted() {
    console.log(this.$root);
    // console.log(this.$parent.msg);
  },

  methods: {
    btnClick() {
      console.log(this.$refs.ipt);
      this.$refs.ipt.focus();
      console.log((this.$refs.child.msg = "被父组件给修改了"));
      console.log("根实例传过来的值===" + this.msg);
    },

    change() {
      console.log(document.getElementById("name").innerText);
      this.name = "hello";
      console.log(document.getElementById("name").innerText);
      this.$nextTick(function () {
        console.log(document.getElementById("name").innerText);
      });
    },
  },

  components: {
    Child,
  },
  inject: ["msg"],
};
</script>

<style></style>
